<script setup>
import Card from "@/components/Card.vue";
import { coursesApi, bannersApi } from "@/api/courses.js";
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { coursesDict } from "@/utils/dicts";
import { getDictName } from "@/utils";
import { ElMessage } from "element-plus";
const router = useRouter();
const courses = ref([]);
const getCourses = async () => {
  const res = await coursesApi();
  if (res.data.status === 200) {
    courses.value = res.data.data;
  } else {
    ElMessage({
      message: res.data.message,
      type: "error",
    });
  }
};
const banners = ref([]);
const getBanners = async () => {
  const res = await bannersApi();
  if (res.data.status === 200) {
    banners.value = res.data.data;
  } else {
    ElMessage({
      message: res.data.message,
      type: "error",
    });
  }
};
onMounted(() => {
  getCourses();
  getBanners();
});
const goToCourse = (id, categoryId) => {
  router.push({
    path: "/course",
    query: { id, categoryId },
  });
};
const goToHref = (href) => {
  if (href) window.open(href, "_blank");
};
</script>
<template>
  <div>
    <div class="page-container">
      <el-carousel v-if="banners.length" height="60vh">
        <el-carousel-item v-for="img in banners" :key="img.id" >
          <img
            class="w-100 h-100 pointer"
            :src="img.img_url"
            @click="goToHref(img.href)"
          />
        </el-carousel-item>
      </el-carousel>
      <div class="module-container" v-for="item in courses" :key="item.id">
        <h5 class="mb-2">
          <span class="h5 font-weight-bold">
            {{ getDictName(item.id, coursesDict) }}
          </span>
          <span class="h6 ml-2"> {{ item.description }} </span>
        </h5>
        <div class="row">
          <div class="col-md-3" v-for="course in item.list" :key="course.id">
            <Card :course="course" @click="goToCourse(course.id, item.id)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
.pointer {
  cursor: pointer;
}
</style>
